<template>
<div class="zhezhao" :style="style" v-show="show">
    <div class="lawdialong" :style="style2">
        <div class="title">
            <span>{{title}}</span>
            <div style="justify-content: center;align-items: center;display: flex;margin-right: 20px;">
                <img src="./img/dialog-close.png" alt="" @click="closedialong">
            </div>
        </div>
        <div class="content">
            <slot/>
        </div>
    </div>
</div>
</template>
<script>
import website from '../config/website'
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      website: website,
      style: {},
      style2: {}
    }
  },
  mounted () {
    this.setWidth()
  },
  methods: {
    closedialong () {
      this.$emit('close')
    },
    setWidth () {
      if (this.website.state === 2) {
        this.style = {
          width: '1920px'
        }
        this.style2 = {
          width: '60%',
          left: '20%'
        }
      } else {
        this.style = {
          width: '3840px'
        }
        this.style2 = {
          width: '1424px',
          left: '1210px'
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.zhezhao{
   height: 1080px;
    // position: fixed;\
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 111111;
}
.lawdialong{
    height: 700px;
    background: url(./img/dialong.png);
    background-size: 100% 100%;;
    position: absolute;
    top: 200px;

    z-index: 111111;
    .title{
        width: 94.5%;
        line-height: 94px;
        color: #00DAFF;
        font-size: 28px;
        text-indent:0.8em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        img{
            cursor: pointer;
            z-index: 99;
        }
    }
    .content{
        height: calc(100% - 94px);
        width: 100%;
        padding: 20px 50px;
    }
}
</style>
